<template>
    <!-- 签署记录 -->
    <div class="proofSign">
        <div class="proofSign-content">
            <div class="padding15All" style="height:50px;box-sizing:border-box;">
                签署记录
            </div>
            <ProofTabs type="sign" @Listsearch="Listsearch" @clear="clear"/>
            <div style="height:20px;background-color: #F5F6F7;"></div>
            <div class="tableMain">
                <div class="tableMainContent">
                    <div class="table padding15All">
                        <el-table
                            ref="multipleTable"
                            :data="list"
                            tooltip-effect="dark"
                            style="width: 100%;height:100%;"
                            @selection-change="handleSelectionChange"
                            :empty-text='emtypetxt'>
                            <el-table-column
                                fixed
                                prop="contractName"
                                label="签署名称"
                                width="">
                            </el-table-column>
                            <el-table-column
                                label="合同状态"
                                width="">
                                <template slot-scope="scope">
                                    <p v-if="scope.row.signState==0" class="">签署中</p>
                                    <p v-if="scope.row.signState==1" class="">已完成</p>
                                    <p v-if="scope.row.signState==2" class="">拒绝签署</p>
                                    <p v-if="scope.row.signState==3" class="">解约中</p>
                                    <p v-if="scope.row.signState==4" class="">已解约</p>
                                    <p v-if="scope.row.signState==5" class="">拒绝解约</p>
                                    <p v-if="scope.row.signState==6" class="">已撤回</p>
                                    <p v-if="scope.row.signState==7" class="">已过期</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="insertTime"
                                label="发起时间"
                                width="">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="320">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="goDetail(scope.row.contractId)">详情</el-button>
                                    <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">电子版出证</el-button> -->
                                    <el-button @click="goCard(scope.row.contractId)" type="text" size="small">电子版出证</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages padding15All">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="params.pageNo"
                            :page-size="params.pageSize"
                            layout="prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog title="电子版出证" :visible.sync="dialogFormVisible"  width="1000px">
            <div class="" v-loading="fullscreenLoading">
                <div class="electricity flexbetween padding15All" v-for="(item) in reciationList" :key="item.id">
                    <div class="detail padding15 flexleft">
                        <img v-if="item.classify==1" src="@/assets/img/system/ele.png" alt="">
                        <img v-if="item.classify==2" src="https://asset.tsign.cn/apps/saas-microfe/evidence-front/prod/0.2.2/img/ant2.4610c0cf.png" alt="">
                        <img v-if="item.classify==3" src="@/assets/img/system/ele1.png" alt="">
                        <div class="tit">
                            <h3> {{item.name}} </h3>
                            <p> {{item.explanation}} </p>
                        </div>
                    </div>
                    <template v-if="item.classify==1">
                        <div class="option padding15" v-if="buyEvidenceReport==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{evidenceReport}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                <el-button type="primary" size="small" @click="goMyorder(item.classify,evidenceReport)">出证</el-button>
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyEvidenceReport==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="evidenceReportUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.classify==2">
                        <div class="option padding15" v-if="buyChainSignature==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{chainSignature}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                <el-button type="primary" size="small" @click="goMyorder(item.classify,chainSignature)">出证</el-button>
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyChainSignature==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="chainSignatureUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.classify==3">
                        <div class="option padding15" v-if="buyNotarialSignature==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{notarialSignature}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                
                                    <el-button type="primary" size="small" @click="goMyorder(item.classify,notarialSignature)">出证</el-button>
                                
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyNotarialSignature==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="notarialSignatureUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
import ProofTabs from './components/ProofTabs.vue'
import { Message } from 'element-ui'
import { signOffList,certificateRequest,appreciationList,signAppreciationList } from '@/api/proof'
export default {
    components: { ProofTabs },
    data(){
        return{
            fullscreenLoading: false,
            
            activeName:'first',

            dialogFormVisible:false,

            list:[],
            total:0,
            emtypetxt: '',
            contractId:'',// 合同id

            params: {
                contractName:'',//签署名称
                contractum:'',//签署编号
                initiateEndTime:'',// 发起结束时间
                initiateStartTime:'',//发起开始时间
                promoterEnterprise:'',//发起方
                signState:'',//合同状态 0 签署中 1已完成 2-拒绝签署3 解约中 4 已解约 5拒绝解约 6-已撤回 7已过期
                pageNo: 1,
                pageSize: 10
            },

            // 增值服务
            reciationList:[],
            buyChainSignature: 0,// 增值服务——上链签署是 否购买 0 否 1是
            buyEvidenceReport: 0,// 增值服务——证据报告是 否购买 0 否 1是
            buyNotarialSignature: 0,// 增值服务——公证签署 是否购买 0 否 1是
            chainSignature: 0,// 增值服务——上链签署
            evidenceReport: 0,// 增值服务——证据报告
            notarialSignature: 0,// 增值服务——公证签署
            chainSignatureUrl:'',//	增值服务——上链签署 URL
            evidenceReportUrl:'',// 增值服务——证据报告url
            notarialSignatureUrl:'',//增值服务——公证签署Url
        }
    },
    mounted() {
        this.getSignOffList()
    },
    methods:{
        // 电子版出证
        goCard(id){
            // console.log(id);
            this.contractId=id
            this.dialogFormVisible = true
            this.getSignAppreciationList()
            this.getAppreciationList(id)
        },
        // 获取增值服务列表
        getSignAppreciationList(){
            this.fullscreenLoading = true;
            signAppreciationList().then(res => {
                this.fullscreenLoading = false;
                this.reciationList=res.result
            }).catch(err => {
                this.fullscreenLoading = false;
                console.log("请求失败", err)
            })
        },
        // 查询剩余增值服务
        getAppreciationList(id){
            appreciationList({
                contractId:id
            }).then(res => {
                let {
                    buyChainSignature,
                    buyEvidenceReport,
                    buyNotarialSignature,
                    chainSignature,
                    evidenceReport,
                    notarialSignature,
                    chainSignatureUrl,
                    evidenceReportUrl,
                    notarialSignatureUrl
                }=res.result
                this.buyChainSignature=buyChainSignature
                this.buyEvidenceReport=buyEvidenceReport
                this.buyNotarialSignature=buyNotarialSignature
                this.chainSignature=chainSignature
                this.evidenceReport=evidenceReport
                this.notarialSignature=notarialSignature
                this.chainSignatureUrl=chainSignatureUrl//	增值服务——上链签署 URL
                this.evidenceReportUrl=evidenceReportUrl// 增值服务——证据报告url
                this.notarialSignatureUrl=notarialSignatureUrl//增值服务——公证签署Url
            }).catch(err => {
                console.log("请求失败", err)
            })
        },

        // 签署记录列表
        getSignOffList(){
            this.emtypetxt = '加载中...';
            signOffList(this.params).then(res => {
                this.list = res.result.records
                this.total = res.result.total
                if (this.list.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 查询
        Listsearch(e){
            this.params.contractName = e.contractName;//合同名称
            this.params.auditNum = e.auditNum;// 审批编号
            this.params.initiateEndTime = e.initiateEndTime;// 审批发起结束时间
            this.params.initiateStartTime = e.initiateStartTime;// 审批发起开始时间
            this.params.promoterEnterprise = e.promoterEnterprise;//发起方
            this.params.signState = e.signState;// 合同状态
            this.getSignOffList()
        },
        clear(e){
            this.Listsearch(e)
        },
        handleSizeChange(val) {

            this.params.pagesize = val
            this.getSignOffList()
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            this.getSignOffList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        goDetail(id){
            this.$router.push({name:'proofSignDetail',query:{contractId:id}},()=>{})
        },

        // 出证
        goMyorder(type,num){
            if(num==0){
                this.$message.warning('出证次数不足，请充值后再次出证')
                return
            }
            this.fullscreenLoading = true;
            certificateRequest({
                contractId:this.contractId,
                requestType:type
            }).then(res => {
                this.fullscreenLoading = false;
                Message({
                    message: res.result.requestResult,
                    type: 'success',
                    duration: 2000,
                })
                // this.$router.push({name:'myOrder'})
                this.getAppreciationList(this.contractId)
            }).catch(err => {
                this.fullscreenLoading = false;
                console.log("请求失败", err)
            })
        },
        goPayInfo(item){
            let userInfomsg=this.$store.state.user.userInfomsg
            let obj={
                money:item.money,// 价格
                timeliness:item.timeliness,// 有效期
                name:item.name,//  产品名称
                // totalPrice:item.totalPrice,// 合计价格
                id:item.id,// 增值服务id
                signPayType:userInfomsg.lastLoginType,// 类型 0个人1企业
                type:1,// 类型0鸿签1增值
                enterpriseId:userInfomsg.lastLoginType==1?userInfomsg.lastLoginId:'',//企业id
            }
            this.$router.push({name:'payInfo',params:obj},()=>{})
        },
    }
}
</script>

<style lang="scss" scoped>
.proofSign{
    flex-grow: 1;
    .proofSign-content{
        height: 100%;
        display: flex;
        flex-direction: column;

        .tableMain{
            flex-grow: 1;

            .tableMainContent{
                display: flex;
                height: 100%;
                flex-direction: column;
                .table{
                    overflow-y: scroll;
                    flex-grow: 1;
                }
                .pages{
                    flex-basis: 60px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            
        }
    }
    
    .electricity{
        border: 1px solid #eee;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
        margin-bottom: 16px;
        .detail{
            width: 60%;
            img{
                width: 110px;
                height: 110px;
                margin-right: 20px;
            }
        }
        .option{
            div{
                margin-bottom: 16px;
            }
            .price{
                color: red;
                font-weight: 800;
            }
        }
    }
}
</style>